<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--标准mui.css-->
<link rel="stylesheet" href="../css/mui.min.css">
<!--App自定义的css-->
<link rel="stylesheet" type="text/css" href="../css/app.css" />
<link rel="stylesheet" type="text/css" href="../css/icons-extra.css" />
</head>
<style>
	.reslogo{
		float: left;
		max-width: 70px;
		margin-right: 7px;
		border-radius: 50%;
	}
	.mui-control-content {
		background-color: white;
		min-height: 400px;
	}
	.mui-control-content .mui-loading {
		margin-top: 50px;
	}
</style>
<body>
<div class="mui-content">
	<!-- 轮播 -->
	<div id="slider" class="mui-slider" style="height: 200px;">
		<div class="mui-slider-group mui-slider-loop">
			<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
			<div class="mui-slider-item mui-slider-item-duplicate">
				<a href="#">
					<img src="../images/bg2.jpg">
				</a>
			</div>
			<!-- 第一张 -->
			<div class="mui-slider-item">
				<a href="#">
					<img src="../images/bg.jpg">
				</a>
			</div>
			<!-- 第二张 -->
			<div class="mui-slider-item">
				<a href="#">
					<img src="../images/bg1.jpg">
				</a>
			</div>
			<!-- 第三张 -->
			<div class="mui-slider-item">
				<a href="#">
					<img src="../images/bg2.jpg">
				</a>
			</div>
			<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
			<div class="mui-slider-item mui-slider-item-duplicate">
				<a href="#">
					<img src="../images/bg.jpg">
				</a>
			</div>
		</div>
		<div class="mui-slider-indicator">
			<div class="mui-indicator mui-active"></div>
			<div class="mui-indicator"></div>
			<div class="mui-indicator"></div>
		</div>
	</div>
	<!-- 选项卡 -->
	<div id="slidercard" class="mui-slider">
		<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
			<a class="mui-control-item" href="#item1mobile">一楼</a>
			<a class="mui-control-item" href="#item2mobile">二楼</a>
			<a class="mui-control-item" href="#item3mobile">三楼</a>
		</div>
		<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-4"></div>
		<div class="mui-slider-group">
			<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
				<div id="scroll1" class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<ul class="mui-table-view">
							<li class="mui-table-view-cell mui-media">
								<a colr="#FE4C04" name="芝佳基汉堡店" href="javascript:;">
									<img class="reslogo" src="../images/restaurant/zhijiaji.jpg">
									<div style="font-size: 17px;">
										芝佳基汉堡店
										<p style="font-size: 12px;"><span style="color: red;margin-right: 7px;" >★4.7</span>月售3172</p>
										<p style="font-size: 12px;">起送￥15 配送￥1<span style="float: right;">7分钟</span></p>
										<p><span class="mui-badge mui-badge-purple">快餐</span>
										   <span class="mui-badge mui-badge-danger">18减2</span></p>
									</div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media">
								<a colr="#F6FBF6" name="小食代脆皮鸡卤肉饭" href="javascript:;">
									<img class="reslogo" src="../images/restaurant/xiaoshidai.jpg">
									<div style="font-size: 17px;">
										小食代脆皮鸡卤肉饭
										<p style="font-size: 12px;"><span style="color: red;margin-right: 7px;" >★5</span>月售6153</p>
										<p style="font-size: 12px;">起送￥13 配送￥1<span style="float: right;">15分钟</span></p>
										<p><span class="mui-badge mui-badge-purple">快餐</span>
										<span class="mui-badge mui-badge-warning">卤肉饭</span></p>
									</div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media">
								<a colr="#006833" name="兰州拉面" href="javascript:;">
									<img class="reslogo" src="../images/restaurant/lanzhoulamian.jpg">
									<div style="font-size: 17px;">
										兰州拉面
										<p style="font-size: 12px;"><span style="color: red;margin-right: 7px;" >★4.5</span>月售2651</p>
										<p style="font-size: 12px;">起送￥20 免配送费<span style="float: right;">25分钟</span></p>
										<p><span class="mui-badge mui-badge-success">拉面</span>
										<span class="mui-badge mui-badge-danger">0元配送</span></p>
									</div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media">
								<a colr="#FFFFFF" name="川味麻辣烫" href="javascript:;">
									<img class="reslogo" src="../images/restaurant/malatang.jpg">
									<div style="font-size: 17px;">
										川味麻辣烫
										<p style="font-size: 12px;"><span style="color: red;margin-right: 7px;" >★4.7</span>月售3172</p>
										<p style="font-size: 12px;">起送￥17 配送￥1<span style="float: right;">34分钟</span></p>
										<p><span class="mui-badge mui-badge-danger">麻辣烫</span>
										<span class="mui-badge mui-badge-danger">17减1</span></p>
									</div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media">
								<a colr="#FFFFFF" name="黄焖鸡米饭" href="javascript:;">
									<img class="reslogo" src="../images/restaurant/huangmenji.jpg">
									<div style="font-size: 17px;">
										黄焖鸡米饭
										<p style="font-size: 12px;"><span style="color: red;margin-right: 7px;" >★4.7</span>月售3552</p>
										<p style="font-size: 12px;">起送￥20 配送￥1<span style="float: right;">30分钟</span></p>
										<p><span class="mui-badge mui-badge-primary">米饭</span>
										<span class="mui-badge mui-badge-danger">25减3</span></p>
									</div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media">
								<a colr="#F6FBF6" name="小食代脆皮鸡卤肉饭" href="javascript:;">
									<img class="reslogo" src="../images/restaurant/xiaoshidai.jpg">
									<div style="font-size: 17px;">
										小食代脆皮鸡卤肉饭
										<p style="font-size: 12px;"><span style="color: red;margin-right: 7px;" >★5</span>月售6153</p>
										<p style="font-size: 12px;">起送￥13 配送￥1<span style="float: right;">15分钟</span></p>
										<p><span class="mui-badge mui-badge-purple">快餐</span>
										<span class="mui-badge mui-badge-warning">卤肉饭</span></p>
									</div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media">
								<a colr="#F6FBF6" name="小食代脆皮鸡卤肉饭" href="javascript:;">
									<img class="reslogo" src="../images/restaurant/xiaoshidai.jpg">
									<div style="font-size: 17px;">
										小食代脆皮鸡卤肉饭
										<p style="font-size: 12px;"><span style="color: red;margin-right: 7px;" >★5</span>月售6153</p>
										<p style="font-size: 12px;">起送￥13 配送￥1<span style="float: right;">15分钟</span></p>
										<p><span class="mui-badge mui-badge-purple">快餐</span>
										<span class="mui-badge mui-badge-warning">卤肉饭</span></p>
									</div>
								</a>
							</li>
							
						</ul>
					</div>
				</div>
			</div>
			<div id="item2mobile" class="mui-slider-item mui-control-content">
				<div id="scroll2" class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<ul class="mui-table-view">
							<li class="mui-table-view-cell mui-media">
								<a colr="#FE4C04" name="芝佳基汉堡店" href="javascript:;">
									<img class="reslogo" src="../images/restaurant/zhijiaji.jpg">
									<div style="font-size: 17px;">
										芝佳基汉堡店
										<p style="font-size: 12px;"><span style="color: red;margin-right: 7px;" >★4.7</span>月售3172</p>
										<p style="font-size: 12px;">起送￥15 配送￥1<span style="float: right;">7分钟</span></p>
										<p><span class="mui-badge mui-badge-purple">快餐</span>
											<span class="mui-badge mui-badge-danger">18减2</span></p>
									</div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media">
								<a colr="#F6FBF6" name="小食代脆皮鸡卤肉饭" href="javascript:;">
									<img class="reslogo" src="../images/restaurant/xiaoshidai.jpg">
									<div style="font-size: 17px;">
										小食代脆皮鸡卤肉饭
										<p style="font-size: 12px;"><span style="color: red;margin-right: 7px;" >★5</span>月售6153</p>
										<p style="font-size: 12px;">起送￥13 配送￥1<span style="float: right;">15分钟</span></p>
										<p><span class="mui-badge mui-badge-purple">快餐</span>
										<span class="mui-badge mui-badge-warning">卤肉饭</span></p>
									</div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media">
								<a colr="#006833" name="兰州拉面" href="javascript:;">
									<img class="reslogo" src="../images/restaurant/lanzhoulamian.jpg">
									<div style="font-size: 17px;">
										兰州拉面
										<p style="font-size: 12px;"><span style="color: red;margin-right: 7px;" >★4.5</span>月售2651</p>
										<p style="font-size: 12px;">起送￥20 免配送费<span style="float: right;">25分钟</span></p>
										<p><span class="mui-badge mui-badge-success">拉面</span>
										<span class="mui-badge mui-badge-danger">0元配送</span></p>
									</div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media">
								<a colr="#FFFFFF" name="川味麻辣烫" href="javascript:;">
									<img class="reslogo" src="../images/restaurant/malatang.jpg">
									<div style="font-size: 17px;">
										川味麻辣烫
										<p style="font-size: 12px;"><span style="color: red;margin-right: 7px;" >★4.7</span>月售3172</p>
										<p style="font-size: 12px;">起送￥17 配送￥1<span style="float: right;">34分钟</span></p>
										<p><span class="mui-badge mui-badge-danger">麻辣烫</span>
										<span class="mui-badge mui-badge-danger">17减1</span></p>
									</div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media">
								<a colr="#FFFFFF" name="黄焖鸡米饭" href="javascript:;">
									<img class="reslogo" src="../images/restaurant/huangmenji.jpg">
									<div style="font-size: 17px;">
										黄焖鸡米饭
										<p style="font-size: 12px;"><span style="color: red;margin-right: 7px;" >★4.7</span>月售3552</p>
										<p style="font-size: 12px;">起送￥20 配送￥1<span style="float: right;">30分钟</span></p>
										<p><span class="mui-badge mui-badge-primary">米饭</span>
										<span class="mui-badge mui-badge-danger">25减3</span></p>
									</div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media">
								<a colr="#F6FBF6" name="小食代脆皮鸡卤肉饭" href="javascript:;">
									<img class="reslogo" src="../images/restaurant/xiaoshidai.jpg">
									<div style="font-size: 17px;">
										小食代脆皮鸡卤肉饭
										<p style="font-size: 12px;"><span style="color: red;margin-right: 7px;" >★5</span>月售6153</p>
										<p style="font-size: 12px;">起送￥13 配送￥1<span style="float: right;">15分钟</span></p>
										<p><span class="mui-badge mui-badge-purple">快餐</span>
										<span class="mui-badge mui-badge-warning">卤肉饭</span></p>
									</div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media">
								<a colr="#F6FBF6" name="小食代脆皮鸡卤肉饭" href="javascript:;">
									<img class="reslogo" src="../images/restaurant/xiaoshidai.jpg">
									<div style="font-size: 17px;">
										小食代脆皮鸡卤肉饭
										<p style="font-size: 12px;"><span style="color: red;margin-right: 7px;" >★5</span>月售6153</p>
										<p style="font-size: 12px;">起送￥13 配送￥1<span style="float: right;">15分钟</span></p>
										<p><span class="mui-badge mui-badge-purple">快餐</span>
										<span class="mui-badge mui-badge-warning">卤肉饭</span></p>
									</div>
								</a>
							</li>
							
						</ul>
					</div>
				</div>
	
			</div>
			<div id="item3mobile" class="mui-slider-item mui-control-content">
				<div id="scroll3" class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<ul class="mui-table-view">
							<li class="mui-table-view-cell mui-media">
								<a colr="#FE4C04" name="芝佳基汉堡店" href="javascript:;">
									<img class="reslogo" src="../images/restaurant/zhijiaji.jpg">
									<div style="font-size: 17px;">
										芝佳基汉堡店
										<p style="font-size: 12px;"><span style="color: red;margin-right: 7px;" >★4.7</span>月售3172</p>
										<p style="font-size: 12px;">起送￥15 配送￥1<span style="float: right;">7分钟</span></p>
										<p><span class="mui-badge mui-badge-purple">快餐</span>
											<span class="mui-badge mui-badge-danger">18减2</span></p>
									</div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media">
								<a colr="#F6FBF6" name="小食代脆皮鸡卤肉饭" href="javascript:;">
									<img class="reslogo" src="../images/restaurant/xiaoshidai.jpg">
									<div style="font-size: 17px;">
										小食代脆皮鸡卤肉饭
										<p style="font-size: 12px;"><span style="color: red;margin-right: 7px;" >★5</span>月售6153</p>
										<p style="font-size: 12px;">起送￥13 配送￥1<span style="float: right;">15分钟</span></p>
										<p><span class="mui-badge mui-badge-purple">快餐</span>
										<span class="mui-badge mui-badge-warning">卤肉饭</span></p>
									</div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media">
								<a colr="#006833" name="兰州拉面" href="javascript:;">
									<img class="reslogo" src="../images/restaurant/lanzhoulamian.jpg">
									<div style="font-size: 17px;">
										兰州拉面
										<p style="font-size: 12px;"><span style="color: red;margin-right: 7px;" >★4.5</span>月售2651</p>
										<p style="font-size: 12px;">起送￥20 免配送费<span style="float: right;">25分钟</span></p>
										<p><span class="mui-badge mui-badge-success">拉面</span>
										<span class="mui-badge mui-badge-danger">0元配送</span></p>
									</div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media">
								<a colr="#FFFFFF" name="川味麻辣烫" href="javascript:;">
									<img class="reslogo" src="../images/restaurant/malatang.jpg">
									<div style="font-size: 17px;">
										川味麻辣烫
										<p style="font-size: 12px;"><span style="color: red;margin-right: 7px;" >★4.7</span>月售3172</p>
										<p style="font-size: 12px;">起送￥17 配送￥1<span style="float: right;">34分钟</span></p>
										<p><span class="mui-badge mui-badge-danger">麻辣烫</span>
										<span class="mui-badge mui-badge-danger">17减1</span></p>
									</div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media">
								<a colr="#FFFFFF" name="黄焖鸡米饭" href="javascript:;">
									<img class="reslogo" src="../images/restaurant/huangmenji.jpg">
									<div style="font-size: 17px;">
										黄焖鸡米饭
										<p style="font-size: 12px;"><span style="color: red;margin-right: 7px;" >★4.7</span>月售3552</p>
										<p style="font-size: 12px;">起送￥20 配送￥1<span style="float: right;">30分钟</span></p>
										<p><span class="mui-badge mui-badge-primary">米饭</span>
										<span class="mui-badge mui-badge-danger">25减3</span></p>
									</div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media">
								<a colr="#F6FBF6" name="小食代脆皮鸡卤肉饭" href="javascript:;">
									<img class="reslogo" src="../images/restaurant/xiaoshidai.jpg">
									<div style="font-size: 17px;">
										小食代脆皮鸡卤肉饭
										<p style="font-size: 12px;"><span style="color: red;margin-right: 7px;" >★5</span>月售6153</p>
										<p style="font-size: 12px;">起送￥13 配送￥1<span style="float: right;">15分钟</span></p>
										<p><span class="mui-badge mui-badge-purple">快餐</span>
										<span class="mui-badge mui-badge-warning">卤肉饭</span></p>
									</div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media">
								<a colr="#F6FBF6" name="小食代脆皮鸡卤肉饭" href="javascript:;">
									<img class="reslogo" src="../images/restaurant/xiaoshidai.jpg">
									<div style="font-size: 17px;">
										小食代脆皮鸡卤肉饭
										<p style="font-size: 12px;"><span style="color: red;margin-right: 7px;" >★5</span>月售6153</p>
										<p style="font-size: 12px;">起送￥13 配送￥1<span style="float: right;">15分钟</span></p>
										<p><span class="mui-badge mui-badge-purple">快餐</span>
										<span class="mui-badge mui-badge-warning">卤肉饭</span></p>
									</div>
								</a>
							</li>
							
						</ul>
					</div>
				</div>
	
			</div>
		</div>
	</div>
	<!-- 选项卡 END -->
	
	<!-- 列表 -->
	
	<!-- 列表 END -->
</div>
<!-- content END -->
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
<script src="../js/mui.min.js"></script>
<script>
mui.init({
	swipeBack: false
});
mui("#slider").slider({interval: 3000});
(function($) {
	//选项卡显示
	$('.mui-scroll-wrapper').scroll({
		indicators: true //是否显示滚动条
	});
	var html2 = '<ul class="mui-table-view"><li class="mui-table-view-cell">第二个选项卡子项-1</li><li class="mui-table-view-cell">第二个选项卡子项-2</li><li class="mui-table-view-cell">第二个选项卡子项-3</li><li class="mui-table-view-cell">第二个选项卡子项-4</li><li class="mui-table-view-cell">第二个选项卡子项-5</li></ul>';
	var html3 = '<ul class="mui-table-view"><li class="mui-table-view-cell">第三个选项卡子项-1</li><li class="mui-table-view-cell">第三个选项卡子项-2</li><li class="mui-table-view-cell">第三个选项卡子项-3</li><li class="mui-table-view-cell">第三个选项卡子项-4</li><li class="mui-table-view-cell">第三个选项卡子项-5</li></ul>';
	var item2 = document.getElementById('item2mobile');
	var item3 = document.getElementById('item3mobile');
	document.getElementById('slidercard').addEventListener('slide', function(e) {
		if (e.detail.slideNumber === 1) {
			if (item2.querySelector('.mui-loading')) {
				setTimeout(function() {
					item2.querySelector('.mui-scroll').innerHTML = html2;
				}, 500);
			}
		} else if (e.detail.slideNumber === 2) {
			if (item3.querySelector('.mui-loading')) {
				setTimeout(function() {
					item3.querySelector('.mui-scroll').innerHTML = html3;
				}, 500);
			}
		}
	});
})(mui);

//点击饭店
mui(".mui-table-view-cell").on("tap","a",function(){
	var name = this.getAttribute("name");
	var color = this.getAttribute("colr");
	var resimg = this.children[0].getAttribute("src");
	mui.openWindow({
		url:"restaurant.html",
		id:"restaurant.html",
		show:{
			autoShow:true,
			aniShow:"slide-in-right",//页面显示动画，默认为”slide-in-right“；
			duration:200,//页面动画持续时间，Android平台默认100毫秒，iOS平台默认200毫秒；
		},
		styles:{
			titleNView: {
				type:'transparent',//透明渐变样式
				titleText: name,
				titleColor:'white',
				backgroundColor: color,
				autoBackButton:true
			},
		},
		waiting:{
			autoShow:false,//自动显示等待框，默认为true
			title:'正在加载...',//等待对话框上显示的提示内容
		},
		extras:{
			name:name,
			resimg:resimg,
			color:color
		},
		});
})	
</script>
</body>
</html>
